import { dom } from "../tool";

interface PropType {
    target?: HTMLElement;
    style?: any;
    className?: string;
    title?: string | HTMLElement;
    child: HTMLElement;
}

interface ModalType {
    new(prop: PropType): ModalType;
    render: (node?: HTMLElement) => HTMLElement;
    visible: boolean;
    setVisible: (arg: boolean) => void;
}

function Modal(this: ModalType, prop: PropType) {
    const { target, style, className, child } = prop || {};
    const container = dom('div', { target, className: 'gkh-modal' });
    const content = dom('div', { style, target: container, child, className });
    container.style.display = "none";
    this.visible = false;
    this.setVisible = (arg) => {
        this.visible = arg;
        container.style.display = arg ? 'flex' : 'none';
    }
    container.onclick = (event: any)=>{
        const className = event.target.getAttribute('class');
        if(className=='gkh-modal'){
            this.setVisible(false);
        }
    }
    this.render = (node) => {
        if (node) {
            node.appendChild(container);
        }
        return container;
    }
    return this;
}

export default Modal as unknown as ModalType;